<template>
  <view
    :class="cardClass"
    @click="handleClick"
  >
    <view v-if="$slots.header" class="card-header">
      <slot name="header"></slot>
    </view>

    <view class="card-body">
      <slot></slot>
    </view>

    <view v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Props {
  // 卡片类型
  variant?: 'default' | 'outlined' | 'elevated' | 'ghost'
  // 是否可点击
  clickable?: boolean
  // 是否显示阴影
  shadow?: boolean
  // 内边距
  padding?: 'none' | 'small' | 'medium' | 'large'
  // 圆角大小
  rounded?: 'none' | 'small' | 'medium' | 'large'
  // 自定义类名
  customClass?: string
}

const props = withDefaults(defineProps<Props>(), {
  variant: 'default',
  clickable: false,
  shadow: true,
  padding: 'medium',
  rounded: 'medium',
  customClass: '',
})

const emit = defineEmits<{
  click: [event: Event]
}>()

const cardClass = computed(() => {
  const baseClass = 'bg-bg-medium transition-all duration-200'

  const variantClasses = {
    default: 'bg-bg-medium',
    outlined: 'bg-bg-medium border border-custom',
    elevated: 'bg-bg-medium shadow-md',
    ghost: 'bg-transparent',
  }

  const paddingClasses = {
    none: '',
    small: 'p-sm',
    medium: 'p-md',
    large: 'p-lg',
  }

  const roundedClasses = {
    none: '',
    small: 'rounded-custom-sm',
    medium: 'rounded-custom',
    large: 'rounded-custom-lg',
  }

  const interactiveClasses = props.clickable
    ? 'cursor-pointer hover:shadow-lg active:scale-98'
    : ''

  const shadowClass = props.shadow && props.variant !== 'elevated'
    ? 'shadow-sm'
    : ''

  return [
    baseClass,
    variantClasses[props.variant],
    paddingClasses[props.padding],
    roundedClasses[props.rounded],
    interactiveClasses,
    shadowClass,
    props.customClass,
  ].filter(Boolean).join(' ')
})

const handleClick = (event: Event) => {
  if (props.clickable) {
    emit('click', event)
  }
}
</script>

<style scoped>
.card-header {
  @apply mb-md border-b border-custom pb-md;
}

.card-body {
  @apply flex-1;
}

.card-footer {
  @apply mt-md border-t border-custom pt-md;
}

.active\:scale-98:active {
  transform: scale(0.98);
}
</style>